<?php
use app\common\service\UtilService;
?>
<!DOCTYPE html>
<html lang="en" ng-app="appointApp" ng-controller="appointCtrl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>预约管理</title>
    <link href="/css/m/yuyue/style.css" rel="stylesheet">
    <link href="/css/m/yuyue/common.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/m/yuyue/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link href="/css/m/yuyue/mobiscroll.css" rel="stylesheet"/>
    <link href="/css/m/yuyue/mobiscroll_date.css" rel="stylesheet"/>
    <script src="/js/m/yuyue/jquery-3.2.1.slim.min.js"></script>
    <script src="/js/m/yuyue/appoint_pageJS.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.6.5/angular.min.js"></script>
</head>
<body>

<div>
    <!--title-->
    <div class='title' id="reserve">
        <a href="/customer/default/index"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <span>预约服务</span>
    </div>

    <!--title-->
    <div class='hide title' id="result">
        <a href="/customer/yuyue/index"><span class="glyphicon glyphicon-chevron-left"></span></a>
        <span>提交订单</span>
    </div>

    <!--主体内容-->
    <div id="mainContent" class="">
        <!--预约项目详情-->
        <div>
            <!--左侧导航部分，展示预约的一级项目-->
            <div id="sec_title" class="btn-group-vertical">
                <input type="button" value="加、改装" class="btn btn-lg btn-default">
                <input type="button" value="洗车" class="btn btn-lg btn-default">
                <input type="button" value="保养" class="btn btn-lg btn-default">
                <input type="button" value="维修" class="btn btn-lg btn-default">
                <input type="button" value="美容" class="btn btn-lg btn-default">
            </div>

            <!--右侧详细，展示预约的详细二级项目-->
            <div id="sec_Content">
                <div ng-repeat="eachItem in list">
                    <div class="option" ng-repeat="x in eachItem track by $index" ng-click="sum(x)"
                         ng-class="{'selected':x.item_selected}">
                        <img ng-src="{{x.image}}" alt="" class="img-thumbnail">
                        <p>{{x.item}}</p>
                        <p>￥：{{x.price}}</p>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--预约订单-->

    <div class="hide orderList" id="orders">
        <p class="title_tj"><span>订单详情</span></p>
        <form name="myForm" action="" method="get">
            <!--订单详情界面--->
            <div ng-repeat="x in orderList">
                <table class="table" id="table">
                    <thead>
                    <tr>
                        <th>{{$index+1}}号订单</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="firstCol">商品名：</td>
                        <td class="secondCol">{{x.item}}</td>
                    </tr>
                    <tr>
                        <td class="firstCol">价格：</td>
                        <td class="secondCol">￥{{x.price}}</td>
                    </tr>
                    <tr>
                        <td class="firstCol">备注：</td>
                        <td class="secondCol"><textarea class="remarks"></textarea></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="person">
                <ul>
                    <li>
                        <span>电话号码：</span>
                        <input type="tel" class="phone" placeholder="请输入电话号码"  value="<?= UtilService::encode($this->params['current_user']["mobile"]); ?>" required
                     >
                    </li>
                    <li>
                        <span>预约时间：</span>
                        <input type="text" class="day" readonly placeholder="请填写预约日期" required>
                    </li>
                </ul>
            </div>
        </form>

    </div>

    <!--结算栏-->
    <div class="numPrice">
        <ul>
            <li class="result">{{sumNum}}个项目,￥：{{sumPrice}}</li>
            <li id="details"><input type="button" value="立即预约" class="order btn-lg btn-block"></li>
            <li id="buy" class="hide"><input id="submit" type="submit" value="提交订单" class="order btn-lg btn-block">
            </li>
        </ul>
    </div>
</div>

<script src="/js/m/yuyue/appointController.js"></script>
<script src=" /js/m/yuyue/mobiscroll_date.js" charset="gb2312"></script>
<script src=" /js/m/yuyue/mobiscroll.js"></script>
<script type="text/javascript">
    $(function () {
        var currYear = (new Date()).getFullYear();
        var opt = {};
        opt.date = {preset: 'date'};
        opt.datetime = {preset: 'datetime'};
        opt.time = {preset: 'time'};
        opt.default = {
            theme: 'android-ics light', //皮肤样式
            display: 'modal', //显示方式
            mode: 'scroller', //日期选择模式
            dateFormat: 'yyyy-mm-dd',
            lang: 'zh',
            showNow: true,
            nowText: "今天",
            startYear: currYear - 50, //开始年份
            endYear: currYear + 10 //结束年份
        };

        $(" .day").mobiscroll($.extend(opt['date'], opt['default']));

    });


</script>
</body>
</html>


